<template>
    <div class="zndlj-box">
        <div class="zndlj-banner">
            <img v-if="intelligent.banner" :src="intelligent.banner.image_url" alt="" class="zndlj-banner-image">
        </div>
        <div class="zndlj-content">
            <template v-if="intelligent.info && intelligent.info.length > 0">
                <div class="zndlj-content-box">
                    <template v-for="(item, index) in intelligent.info" :key="index">
                        <template v-if="item.display.big_headline == 1">
                            <div class="zndlj-content-title">
                                <strong>{{ item.big_headline }}</strong>
                            </div>
                        </template>
                        <el-divider content-position="center">
                            <div class="line"></div>
                        </el-divider>
                        <template v-if="item.display.title == 1">
                            <div class="zndlj-content-title2">
                                <strong>{{ item.title }}</strong>
                            </div>
                        </template>
                        <template v-if="item.display.additional == 1">
                            <div class="zndlj-box2-content" v-for="(item3, index3) in item.additional" :key="index3">
                                <p>{{ index3 + 1 }} 、{{ item3 }}</p>
                            </div>
                        </template>
                        <template v-if="item.display.content == 1">
                            <div class="zndlj-desc">
                                <span v-html="item.content"></span>
                            </div>
                        </template>
                        <template v-if="item.display.image == 1">
                            <div class="zndlj-images-box" v-for="(item2, index2) in item.imgList" :key="index2">
                                <img :src="item2" alt="">
                            </div>
                        </template>
                        <template v-if="item.skuList && item.skuList.length > 0">
                            <div class="zndlj-content-box3">
                                <div class="zndlj-box3" v-for="(item2, index2) in item.skuList" :key="index2">
                                    <div class="zndlj-box3-images">
                                        <img :src="item2.images" alt="">
                                    </div>
                                    <div class="zndlj-box3-content">
                                        <div class="zndlj-box3-content-title">{{ item2.name }}</div>
                                        <div class="zndlj-box3-content-desc">
                                            <ul>
                                                <li v-for="(item3, index3) in item2.sku" :key="index3">
                                                    {{ item3 }}
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </template>
                </div>
            </template>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getIntelligentDetail } from '@/api/cp/product'

// 响应式数据，用于存储屏幕宽度
const screenWidth = ref(window.innerWidth);

const route = useRoute();
const id = route.query.id || 1;

// 监听屏幕尺寸变化，更新屏幕宽度数据
const updateScreenWidth = () => {
    screenWidth.value = window.innerWidth;
};
window.addEventListener('resize', updateScreenWidth);

const intelligent = ref({})

onMounted(() => {
    screenWidth.value = window.innerWidth;
    getIntelligentDetail({
        product_id: id
    }).then(res => {
        intelligent.value = res.data
        console.log(intelligent.value);
    })
})

</script>

<style lang="scss" scoped>
@media screen and (min-width: 1920px) {
    .zndlj-banner-image {
        max-width: 100%;
        width: 100%;
        height: auto;
    }

    .zndlj-box {
        width: 100%;
        height: auto;
    }

    .zndlj-content {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 0 150px;
    }

    .zndlj-content-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }


    .zndlj-content-title2 {
        font-size: 24px;
        line-height: 1.75;
        color: #000000;
        text-align: center;
        margin-bottom: 36px;
    }

    .el-divider--horizontal {
        border-top: 1px var(--el-border-color) var(--el-border-style);
        display: block;
        height: 1px;
    }

    .zndlj-desc {
        height: 100%;
        word-wrap: break-word;
        font-size: 18px;
        line-height: 1.75;
        margin-bottom: 50px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }

    .zndlj-box3-images img {
        max-width: 100%;
        height: 100px;
    }

    .zndlj-images {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .zndlj-images-box {
        display: grid;
        place-items: center;
        margin-bottom: 50px;

        img {
            width: 50vw;
        }
    }

    .zndlj-box2-list {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 50px;
    }

    .zndlj-box2-content {
        line-height: 3;
        text-align: left;
        margin-left: 16%;
    }

    .zndlj-box2-images {
        max-width: 100%;
        height: auto;
        margin-bottom: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .zndlj-box2-images-img {
        height: 204px;
        max-width: 100%;
        height: auto;
    }

    .zndlj-box2-images-img2 {
        max-width: 100%;
        height: auto;
    }

    .zndlj-content-box3 {
        display: flex;
        flex-direction: row;
        align-content: center;
        margin-bottom: 50px;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .zndlj-box3 {
        height: 209px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }

    .zndlj-box3-content-title {
        font-size: 24px;
        color: #b83333;
        text-align: justify;
    }

    .zndlj-box3-content-desc li {
        line-height: 2;
        width: 250px;
    }

    .zndlj-box3-content {
        margin-left: 30px;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1919px) {
    .zndlj-banner-image {
        max-width: 100%;
        height: auto;
    }

    .zndlj-content {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 0 150px;
    }

    .zndlj-content-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }


    .zndlj-content-title2 {
        font-size: 24px;
        line-height: 1.75;
        color: #000000;
        text-align: center;
        margin-bottom: 36px;
    }

    .el-divider--horizontal {
        border-top: 1px var(--el-border-color) var(--el-border-style);
        display: block;
        height: 1px;
    }

    .zndlj-desc {
        height: 100%;
        word-wrap: break-word;
        font-size: 18px;
        line-height: 1.75;
        margin-bottom: 50px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }

    .zndlj-box3-images img {
        max-width: 100%;
        height: 100px;
    }

    .zndlj-images {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .zndlj-images-box {
        display: grid;
        place-items: center;
        margin-bottom: 50px;

        img {
            width: 50vw;
        }
    }

    .zndlj-box2-list {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 50px;
    }

    .zndlj-box2-content {
        line-height: 3;
        text-align: left;
        margin-left: 16%;
    }

    .zndlj-box2-images {
        max-width: 100%;
        height: auto;
        margin-bottom: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .zndlj-box2-images-img {
        height: 204px;
        max-width: 100%;
        height: auto;
    }

    .zndlj-box2-images-img2 {
        max-width: 100%;
        height: auto;
    }

    .zndlj-content-box3 {
        display: flex;
        flex-direction: row;
        align-content: center;
        margin-bottom: 50px;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .zndlj-box3 {
        height: 209px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }

    .zndlj-box3-content-title {
        font-size: 24px;
        color: #b83333;
        text-align: justify;
    }

    .zndlj-box3-content-desc li {
        line-height: 2;
        width: 250px;
    }

    .zndlj-box3-content {
        margin-left: 30px;
    }
}


@media screen and (min-width: 769px) and (max-width: 1024px) {
    .zndlj-box3-images img {
        max-width: 100%;
        height: 100px;
    }

    .zndlj-banner-image {
        max-width: 100%;
        height: auto;
    }

    .zndlj-content {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 0 100px;
    }

    .zndlj-content-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }


    .zndlj-content-title2 {
        font-size: 24px;
        line-height: 1.75;
        color: #000000;
        text-align: center;
        margin-bottom: 36px;
    }

    .el-divider--horizontal {
        border-top: 1px var(--el-border-color) var(--el-border-style);
        display: block;
        height: 1px;
    }

    .zndlj-desc {
        height: 100%;
        word-wrap: break-word;
        font-size: 18px;
        line-height: 1.75;
        margin-bottom: 50px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }

    .zndlj-images {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .zndlj-images-box {
        display: grid;
        place-items: center;
        margin-bottom: 50px;

        img {
            width: 50vw;
        }
    }

    .zndlj-box2-list {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 50px;
    }

    .zndlj-box2-content {
        line-height: 3;
        text-align: left;
        margin-left: 16%;
    }

    .zndlj-box2-images {
        max-width: 100%;
        height: auto;
        margin-bottom: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .zndlj-box2-images-img {
        height: 204px;
        max-width: 100%;
        height: auto;
    }

    .zndlj-box2-images-img2 {
        max-width: 100%;
        height: auto;
    }

    .zndlj-content-box3 {
        display: flex;
        flex-direction: row;
        align-content: center;
        margin-bottom: 50px;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .zndlj-box3 {
        height: 209px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }

    .zndlj-box3-content-title {
        font-size: 24px;
        color: #b83333;
        text-align: justify;
    }

    .zndlj-box3-content-desc li {
        line-height: 2;
        width: 170px;
    }

    .zndlj-box3-content {
        margin-left: 30px;
    }
}

@media screen and (max-width: 768px) {
    .zndlj-box3-images img {
        max-width: 100%;
        height: 100px;
    }

    .zndlj-banner-image {
        max-width: 100%;
        height: auto;
    }

    .zndlj-content {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
    }

    .zndlj-content-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }


    .zndlj-content-title2 {
        font-size: 15px;
        line-height: 1.75;
        color: #000000;
        text-align: center;
        margin-bottom: 30px;
    }

    .el-divider--horizontal {
        border-top: 1px var(--el-border-color) var(--el-border-style);
        display: block;
        height: 1px;
    }

    .zndlj-desc {
        height: 100%;
        word-wrap: break-word;
        font-size: 18px;
        line-height: 1.75;
        margin-bottom: 50px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }

    .zndlj-images {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .zndlj-images-box:not(:first-child) {
        margin-top: 30px;
    }

    .zndlj-box2-list {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .zndlj-box2-content {
        line-height: 3;
    }

    .zndlj-box2-images {
        margin-top: 50px;
        max-width: 100%;
        height: auto;
    }


    .zndlj-box2-images img {
        width: 352px;
        margin-left: 15px;
        max-width: 100%;
        height: auto;
    }

    .zndlj-content-box3 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin-top: 80px;
        margin-bottom: 50px;
    }



    .zndlj-box3 {
        height: 209px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }

    .zndlj-box3-content-title {
        font-size: 24px;
        color: #b83333;
        text-align: justify;
    }

    .zndlj-box3-content-desc li {
        line-height: 2;
        width: 170px;
    }

    .zndlj-box3-content {
        margin-left: 30px;
    }
}
</style>